<template>
  <div class="basic-link">
    <!-- 轮播图 -->
    <a v-for="(item, index) in links" :key="index + 1"  class="panel-block" :href="item.url" target="_blank" :title="item.desc">
      {{item.title}}
    </a>
    <div class="panel-block">
      <a @click="$router.push('/link')" class="button is-fullwidth">查 看 更 多</a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'basic-link',
  data() {
    return {
      links : [],
      flag: 0,
      interval: null
    }
  },
  methods: {

  },
  // 获取link列表
  created() {
    this.$axios.getData.getLinks(10).then(res => {
      this.links = res.data.data
    })
  },
  mounted() {
    // 轮播图定时器
  }
}
</script>

<style scoped>
.panel-block:not(:last-child), .panel-tabs:not(:last-child) {
  border-bottom: 1px solid #ededed;
}
a.panel-block, label.panel-block {
  cursor: pointer;
}
a.panel-block:hover, label.panel-block:hover {
  background-color: #f6f6f6;
}
.panel-block {
  align-items: center;
  color: #363636;
  display: flex;
  justify-content: flex-start;
  padding: .5em .75em;
}
.panel-block:last-child {
  /*border-radius: 6px;*/
  /*!* border-bottom-right-radius: 6px; *!*/
  /*margin-top: 10px;*/
  /*background-color: #91d601;*/

}
.panel-block {
  align-items: center;
  display: flex;
  justify-content: flex-start;
  padding: .5em .75em;
}
.button.is-fullwidth {
  display: flex;
  width: 100%;
}
.button {
  border-radius: 6px;
  /* border-bottom-right-radius: 6px; */
  margin-top: 10px;
  background-color: #91d601;
  border-width: 1px;
  cursor: pointer;
  justify-content: center;
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}

</style>
